import ButtonCounter from './components/ButtonCounter'
import AppSubCom from './components/AppSubCom'
import ContextCom from './components/ContextCom'
import { useState } from 'react'
import MyContext from './MyContext'
import { useLocalStorage } from './hooks/useLocalStorage'
import { useWindowScrollY } from './hooks/useWindowScrollY'
import { BrowserRouter, Link, Routes, Route } from 'react-router-dom'
import { Home } from './route/Home'
import { About } from './route/About'
import { RouteParam } from './route/RouteParams'
import { Login } from './route/Login'
import { LoginPanel } from './route/login/LoginPanel'
import { LoginRegistry } from './route/login/LoginRegistry'
import { Page404 } from './route/Page404'

function App() {

  const showMsg = (msg) => {
    window.alert(msg)
  }

  const [msg, setMsg] = useState('123456')
  const [a, setA] = useLocalStorage('a', '123')
  const [y] = useWindowScrollY()

  return (
    <MyContext.Provider value={msg}>
      <div style={{height: '1200px'}}>
        <ButtonCounter text="counter: "></ButtonCounter>
        <AppSubCom sendF={showMsg} />
        <ContextCom />
        <button onClick={() => setA('456')}>设置localstorage的值为456</button>
        <div>{y}</div>
        <BrowserRouter>
          <Link to="/login">登录</Link>
          <Link to="/">首页</Link>
          <Link to="/about">关于</Link>
          <Routes>
            <Route path='/' element={<Home />} />
            <Route path='/login' element={<Login />} >
              {/* <Route path='loginPanel' element={<LoginPanel />} /> */}
              {/* 默认嵌套路由 */}
              <Route index element={<LoginPanel />} />
              <Route path='loginRegistry' element={<LoginRegistry />} />
            </Route>
            <Route path='/about' element={<About />} />
            <Route path='/params/:id' element={<RouteParam />} />
            <Route path='/params' element={<RouteParam />} />
            <Route path='*' element={<Page404 />} />
          </Routes>
        </BrowserRouter>
      </div>
    </MyContext.Provider>
  );
}

export default App;
